<template>
  <div>
    <el-container>
      <!-- 头部样式 -->
      <el-header>
        <div class="logo">
          <!-- logo标图 -->
          <div class="demo-basic--circle">
            <div class="block">
              <el-avatar :size="70" :src="circleUrl"></el-avatar>
            </div>
          </div>
          <div>APE</div>
          <!-- 首页新闻排行榜 -->
          <div style="width: 100px">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-menu-item index="1" @click="goTodefault">首页</el-menu-item>
              
            </el-menu>
          </div>
          <!-- 搜索框和查询按钮 -->
          <div class="input">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item>
                <el-button
                  type="primary"
                  @click="goToLogin"
                  v-show="!this.showUsername"
                  >用户登录</el-button
                >
                <el-button
                  type="primary"
                  @click="goToLoginBack"
                  v-show="!this.showUsername"
                  >管理员登陆</el-button
                >
                <el-button
                  type="primary"
                  @click="goToBack"
                  v-show="this.showUsername === 'admin'"
                  >去往后台</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <!-- 用户头像 -->
          <div>
            <el-col :span="12">
              <div class="demo-basic--circle1">
                <div class="block">
                  <el-avatar :size="40" :src="squareUrl"></el-avatar>
                </div>
              </div>
            </el-col>
          </div>

          <!-- 用户名及用户功能 -->
          <div>
            <el-dropdown>
              <span class="el-dropdown-link" :model="formData">
                {{ showUsername
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="goToChangePWD"
                  >修改密码</el-dropdown-item
                >
                <el-dropdown-item @click.native="clearUser"
                  >注销用户</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-container>
          <router-view></router-view>

          <!-- <el-aside width="380px">
            

            
<router-view name="test"></router-view>
           
          </el-aside> -->
        </el-container>

        <!-- <el-footer height="20%"> -->
        <!-- <div class="QRCode1">
            <div class="FooterText1">
              <p>扫描关注公众号</p>
            </div>
          </div>

          <div class="QRCode2">
            <div class="FooterText1">
              <p>扫描加入微信群</p>
            </div>
          </div>

          <div class="QRCode3">
            <div class="FooterText1">
              <p>扫描加入QQ群</p>
            </div>
          </div>

          <div class="FooterText2">
            Copyright © 2021-2021 APE科技 版权所有. All rights reserved.
          </div> -->
        <!-- </el-footer> -->
      </el-container>
    </el-container>
  </div>
</template>


<script>
import Cookies from "js-cookie";
import { clearToken } from "../utils/auth";
import ing from "../views/imgs/logo.png";
import tox from "../views/imgs/touxiang.webp";
export default {
  inject: ["reload"],
  data() {
    return {
      circleUrl: ing,
      squareUrl: tox,
      url: tox,

      formInline: {
        user: "",
        region: "",
      },

      tableData: [],

      formData: {
        username: "",
      },
      activeIndex: "1",
      activeIndex2: "1",
      images: [
        { url: require("@/views/imgs/aoyunhui1.webp") },
        { url: require("@/views/imgs/aoyunhui2.webp") },
        { url: require("@/views/imgs/aoyunhui3.webp") },
        { url: require("@/views/imgs/aoyunhui4.webp") },
      ],
    };
  },

  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    goToLogin() {
      this.$router.push("/login");
    },
    goToLoginBack() {
      this.$router.push("/loginBack");
    },
    goToBack() {
      this.$router.push("/adminhome");
    },
    goToNews() {
      this.$router.push("/news");
    },
    goTodefault() {
      this.$router.push("/");
    },
    goToChangePWD() {
      this.$router.push("/changePasswd");
    },

    clearUser() {
      Cookies.remove("username");
      Cookies.remove("id")
      clearToken();
      this.$message.success("注销成功");
      this.reload();
    },
  },
  computed: {
    showUsername() {
      return Cookies.get("username");
    },
  },
};
</script>

<style>
body{
  width:auto
}
.demo-image__preview {
  height: 100px;
  width: 600px;
}
.text1 {
  width: 450px;
  height: 100px;
  float: right;
  font-size: 10px;
}
.img {
  width: 100px;
  height: 100px;
  float: left;
}
.el-header,
.el-footer {
  background-color: white;
  color: #333;
  /* text-align: center; */
  line-height: 30px;
  font-size: 16px;
  width: 1400px;
}
.el-footer {
  background-color: white;
}

.el-aside {
  background-color: white;
  color: #333;
  text-align: left;
  line-height: 25px;
  font-size: 14px;
  height: 130%;
  width: 50%;
}

.el-main {
  background-color: whitesmoke;
  color: #333;
  line-height: 20px;
  height: 700px;
}

body > .el-container {
  margin-bottom: 40px;
  background-color: white;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.logo {
  display: flex;
  justify-items: left;
}
.Breadcrumb {
  display: flex;
  /* justify-content: center; */
  margin-top: -25px;
}
.demo-form-inline {
  margin-left: 50%;
  margin-top: 10px;
  width: 500px;
}
.el-dropdown {
  margin-top: 18px;
  margin-left: 20px;
  width: 200px;
}
.demo-basic--circle1 {
  margin-top: 10px;
}
.el-container {
  height: 720px;
  min-width: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 卡片 */
.text {
  font-size: 20px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
}

/* 走马灯 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-carousel--horizontal {
  width: 300px;
}
.el-carousel__indicator--horizontal {
  padding: 0% !important;
}
.el-menu {
  width: 400px;
}
.input {
  width: 1100px;
  height: 100px;
}
.el-image {
  display: block !important;
}
img {
  width: 100%;
  height: 100%;
}


body {
  background-color: white;
}
</style>